import { PageContainer } from '@ant-design/pro-layout';
import {PlusOutlined} from '@ant-design/icons'
import { Card, Modal, Button, message } from 'antd';
import React from 'react';
import {UseTable,UseSearch,roleList,targsList,educationList, sexList,statusList} from '../../components'
import {getKey,getStr} from '@/components/function'
import UserDetail from './UserDetail';
import UserInfoController from '@/services/UserInfoService/UserInfoController';
const {confirm} = Modal
class UserList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            query:{page:0,pageSize:10},
            refresh:false
         };
    }
    componentDidMount(){
  
    }
    getList=(qurey)=>{
        return UserInfoController.getList(qurey)
    }
    handleSearch=(query)=>{
        this.setState({query})
        this.refresh()
    }
    reset=()=>{
        this.setState({query:{}})
        this.refresh()
    }
    onRef=(ref)=>{
        this.setState({modal:ref})
    }
    submit=()=>{
        this.state.modal.submit()
    }
    toDetail=(rowData,type)=>{
        this.setState({rowData,visibleUserDetail:true,type})
    }
    toResetPassWord=(rowData)=>{
        confirm({
            title:'重置密码',
            content:`确定要为${rowData.name}重置密码吗？`,
            onOk(){
                UserInfoController.resetPassword({userName:rowData.userName}).then(r=>{
                    if(r&&r.status===200&&r.data===1){
                        message.success('重置密码成功')
                    }                    
                })
            }
        })
    }
    toChangeStatus=(rowData,status)=>{
        let that = this
        let params = {
            status,
            id:rowData.id
        }
        confirm({
            title:status==='1'?'启用账号':'禁用账号',
            content:<span>确定要<span style={{color:'red',margin:3}}>{status==='1'?'启用':'禁用'}{rowData.name}</span>的账号吗？</span>,
            onOk(){
                UserInfoController.changeStatus(params).then(r=>{
                    if(r&&r.status===200&&r.data===1){
                        message.success('操作成功')
                        that.refresh()
                    }
                })
            }
        })
    }
    refresh=()=>{
        this.setState({refresh:!this.state.refresh})
    }
    onCancel=()=>{
        this.setState({visibleUserDetail:false});
        this.refresh()
    }
    render() {
        const {visibleUserDetail,query,rowData,type,refresh}=this.state
        const columns=[
            // {title:'编号',dataIndex:'id'},
            {title:'登录账号',dataIndex:'userName'},
            {title:'姓名',dataIndex:'name'},
            {title:'性别',dataIndex:'sex',render:text=>getKey(text,sexList)},
            {title:'出生日期',dataIndex:'birthday'},
            {title:'学历',dataIndex:'education'},
            {title:'省级部门',dataIndex:'provinceDepartmentName'},
            {title:'市级部门',dataIndex:'cityDepartmentName'},
            {title:'角色',dataIndex:'roleName',},
            {title:'标签',dataIndex:'targs'},
            {title:'状态',dataIndex:'status',render:text=>getKey(text,statusList)},
            {title:'操作',dataIndex:'id',render:(text, rowData)=><div>
                <Button onClick={this.toDetail.bind(this,rowData,2)} style={{margin:5}}>修改</Button>
                <Button onClick={this.toResetPassWord.bind(this,rowData)} type={'primary'} style={{margin:5}}>重置密码</Button>
                {rowData.status==='1'&&<Button onClick={this.toChangeStatus.bind(this,rowData,'2')} type={'danger'} style={{margin:5}}>停用</Button>}
                {rowData.status==='2'&&<Button onClick={this.toChangeStatus.bind(this,rowData,'1')} type={'danger'} style={{margin:5}}>启用</Button>}
                
                </div>},
        ]
        const searchItem=[
            {name:'员工姓名',keyName:'name',valueType:'text'},
            {name:'员工编号',keyName:'userName',valueType:'text'},
            {name:'状态',keyName:'status',valueType:'select',selectDatas:[{code:'1',name:'正常'},{code:'2',name:'停用'}]},
        ]
        return (
            <PageContainer>
                <Card>
                    <UseSearch searchItem={searchItem} handleSearch={this.handleSearch} reset={this.reset} 
                    content={<Button type={'primary'} onClick={()=>this.setState({visibleUserDetail:true,type:1})} icon={<PlusOutlined/>}>新建</Button>}
                    />
                </Card>
                <Card>
                <UseTable columns={columns} getData={this.getList} query={query} rowKey={'id'} refresh={refresh}/>
                </Card>
                <Modal
                visible={visibleUserDetail}
                onCancel={this.onCancel}
                width={'80%'}
                onOk={this.submit}
                >
                    {visibleUserDetail&&<UserDetail onRef={this.onRef} rowData={rowData} type={type} onCancel={this.onCancel} disabled={false}/>}
                </Modal>
            </PageContainer>
        );
    }
}

export default UserList;